<template>
	<view class="charts-box">
		<qiun-data-charts type="column" :opts="opts" :chartData="chartData" />
	</view>
</template>

<script setup>
	
	import {ref,onMounted} from 'vue'

	const props = defineProps({
	  categories: {
	    type: Array,
	    required: true
	  },
	  name: {
	    type: String,
	    required: true
	  },
	  data: {
	    type: Array,
	    required: true
	  }
	})
	

	// 声明响应式数据
	const chartData = ref({});
	const opts = {
		color: ["#1890FF"],
		padding: [15, 15, 0, 5],
		enableScroll: false,
		legend: {
			fontColor:"#000",
			fontSize: "12",
			
		},
		xAxis: {
			disableGrid: true,
			disabled:true
		},
		yAxis: {
			// data: [{
			// 	min: 0,
			// 	max:100
			// }]
		},
		extra: {
			column: {
				type: "group",
				width: 30,
				activeBgColor: "#000000",
				activeBgOpacity: 0.08
			}
		}
	};
	
	
	
	// 模拟从服务器获取数据的方法
	const getServerData = () => {
		setTimeout(() => {
			const res = {
				categories: props.categories,
				series: [
					{
						name: props.name,
						data: props.data,
	
					}
				]
			};
			chartData.value = JSON.parse(JSON.stringify(res));
		}, 500);
	};
	// 在组件挂载完成后调用 getServerData 方法
	onMounted(() => {
		getServerData();
	});
</script>


<style lang="scss" scoped>
	.charts-box {
		width: 90vw;
		margin: 20rpx auto;
		height: 200px;
		border: 1px solid #ccc;
		background-color: #fff;
		box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
	}
</style>